@import "reset.scss";
@import "common.scss";
@import "../utils/iconfont/iconfont.css";

@function getvw($w){
    @return ($w / 750) * 100 + vw;
}
@function getvmin($vmin){
    @return ($vmin / 750) * 100 + vmin;
}
.wrap{
    header{
        .header_top{
            .header-icon{
                position: relative;
                .head-icon{
                    font-size: getvmin(90);
                }
                >span{
                    font-size:getvmin(20);
                    color: #fff;
                    width: getvw(28);
                    height: getvw(28);
                    text-align: center;
                    line-height: getvw(28);
                    background-color:#fa5050;
                    border-radius: 50%;
                    position: absolute;
                    top: 0;
                    right:getvw(3);
                    transform: translate(0 -50%);
                }
            }
        }
        .header-text{
            width: getvw(704);
            margin:0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .text-img{
                display: flex;
                align-items: center;
                .imgeas{
                    width: getvw(170);
                    >img{
                        width: 100%;
                        display: block;
                    }
                }
                >.text{
                    margin-left: getvw(25);
                    >h2{
                        font-size:getvmin(29);
                        font-weight:normal;
                        line-height: 35px;
                    }
                    >p{
                       font-size: getvmin(26);
                       color: #9d9d9d;
                       line-height: 53px; 
                    }
                }
            }
            .text-icon{
                .text-iconright{
                    font-size: getvmin(87);
                    color: #010101;
                }
            }
        }
    }
    main{
        .main-head{
            display: flex;
            justify-content: space-between;
            margin-top:getvw(26);
            .main-icontext{
                width: getvw(195);
                height: getvw(151);
                background-color: #b2e0a0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                &:nth-child(2){
                    background-color: #a0dce0;
                }
                &:nth-of-type(3){
                    background-color:#e0b7a0;
                }
                .icontext{
                    font-size: getvmin(82);
                    color: #fff;
                }
                >p{
                    font-size: getvmin(26);
                    line-height: getvw(46);
                }
            }
        }
        .main_flex{
            &:nth-child(4){
                .left_icon{
                   color: #b2e0a0; 
                } 
            }
            &:nth-child(5){
                .left_icon{
                    color: #a0dce0;
                }
            }
        }
        .main-button{
            width: getvw(538);
            margin:getvw(36) auto getvw(26);
            display: flex;
            justify-content:space-between;
            button{
                width: getvw(147);
                height: getvw(76);
                font-size: getvmin(24);
                color:#fff;
                border-radius:getvw(38);
                border:none;
                background-color: #ff9344;
            }
        }
    }
}